<template>
	<div :class="{[prefixCls+'-tag']:true,[prefixCls+'-tag-'+color]:colors}" :style="setDotColor()">
		<slot></slot>
	</div>
</template>

<script>
import {prefixCls} from '../prefix'
import './tag.css'

export default {
	name:`${prefixCls}Tag`,
	props:{
		color: {
			type:String,
			default:'default'
		}
	},
	data() {
		return {
			prefixCls: prefixCls,
			colors:true
		}
	},
	methods: {
	    setDotColor() {
	      if(this.color && this.color.indexOf("#")!== -1) {
	      	this.colors = false
	        return 'background:'+this.color+';border-color:'+this.color+';color:#fff'
	      }
	    }
	}
}
</script>